<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>导航栏的基本使用</title>
		<link rel="stylesheet" href="./Bootstrap4.6.1/css/bootstrap.css">
		<script src="./Bootstrap4.6.1/js/jquery.js"></script>
		<script src="./Bootstrap4.6.1/js/bootstrap.bundle.js"></script>
	</head>
	<body>
		<!-- 
		    navbar：导航栏基本样式
		    navbar-expand-lg：在什么屏幕下显示菜单
		    navbar-light：导航栏配色
		    bg-light：导航栏背景色，  配色和背景色的颜色单词必须一样
		-->
		<nav class="navbar navbar-expand-md navbar-dark bg-dark">
		    <!-- 导航的标题 可以在a标签中添加简单的内容，如图片、文字 ， 这里的内容，不会被隐藏-->
		    <a class="navbar-brand" href="#">导航标题</a>
		    <!-- 菜单隐藏时显示的按钮，一般不去修改里面的内容，但是按钮整体的位置可以改变 -->
		    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav01">
		        <span class="navbar-toggler-icon"></span>
		    </button>
		    <!-- 这里是会被隐藏的内容，里面可以添加其他想要隐藏的元素 -->
		    <div class="collapse navbar-collapse" id="nav01">
		        <ul class="navbar-nav mr-auto">
					<a class="nav-link" href="#">首页 </a>
					<a class="nav-link" href="#">产品</a>
					<a class="nav-link" href="#">产品</a>
					<a class="nav-link" href="#">产品</a>
					<a class="nav-link" href="#">产品</a>
					<a class="nav-link ">关于我们</a>
		        </ul>
		        <!-- 导航栏的表单 -->
		        <form class="form-inline my-2 my-lg-0">
		            <input class="form-control mr-sm-2" type="search" placeholder="搜索" aria-label="Search">
		            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
		        </form>
		    </div>
		</nav>
		
		
	</body>
</html>